<template>
  <div
    class="listWrap"
    :style="'background-image:url(' + industry.picture + ')'"
  >
    <div class="w listBox" v-show="industryList.length">
      <h1>{{ industry.title }}</h1>
      <div class="main clearfix">
        <div
          class="item"
          v-for="item in industryList"
          :key="item.id"
          @click="handleToUrl(item.videoUrl)"
        >
          <img :src="item.picture" alt />
          <div class="info">
            <span
              v-if="item.tag"
              class="tip"
              :style="{ background: item.color }"
              >{{ item.tag.toUpperCase() }}</span
            >
            <p class="ellipsis2" :title="item.title">{{ item.title }}</p>
            <div class="collectBox" @click.stop="handleCollect(item)">
              <img
                v-if="!item.isFavourite"
                src="../../../../assets/imgs/s2.png"
                class="sImg"
              />
              <img
                v-if="item.isFavourite"
                src="../../../../assets/imgs/s1.png"
                class="sImg"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index"
import { mapState, mapMutations } from "vuex"
export default {
  data () {
    return {
      industryList: [],
      industry: {}
    }
  },
  computed: {
    ...mapState(["lang", "tags", "userInfo"])
  },
  watch: {
    lang () {
      if (this.userInfo) {
        this.handleGetList()
      } else {
        this.isShowLogin("show")
      }
    }
  },
  mounted () {
    if (this.userInfo) {
      this.handleGetList()
    } else {
      this.isShowLogin("show")
    }
  },
  methods: {
    ...mapMutations(["isShowLogin"]),
    handleGetColor (tag) {
      const arr = this.tags.filter(v => v.name == tag.toLowerCase())
      return arr.length && arr[0].color
    },
    async handleGetList () {
      const parmas = {
        langeuage: this.lang,
        industryId: this.$route.params.industryId
      }
      const res = await api.getCaseList(parmas)
      this.industryList = res.data || []
      this.industry = res.extraData || {}
    },
    async handleCollect (record) {
      if (!this.userInfo) {
        this.isShowLogin("show")
        return
      }
      const parmas = {
        caseId: record.id,
        isFavourite: !record.isFavourite
      }
      const res = await api.collectCaseList(parmas)
      this.$message.success(this.$t("vr.czcg"))
      this.handleGetList()
    },
    handleToUrl (url) {
      window.open(url, "_blank")
    }
  }
};
</script>

<style lang="scss" scoped>
.listWrap {
  background-size: cover;
  padding-top: 160px;
  min-height: calc(100vh - 90px);
  padding-bottom: 40px;
  h1 {
    display: inline-block;
    border-radius: 10px 10px 0 0;
    margin-left: 15px;
    padding: 15px 20px;
    color: #fff;
    font-weight: 400;
    background: rgba(34, 29, 29, 0.4);
  }
  .main {
    padding: 40px;
    padding-bottom: 0;
    padding-right: 0;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.11);
    border-radius: 15px;
    .item {
      width: 246px;
      float: left;
      margin-right: 40px;
      border-radius: 2px;
      overflow: hidden;
      a {
        display: block;
      }
      img {
        width: 100%;
        height: 128px;
        vertical-align: bottom;
      }
      .info {
        position: relative;
        height: 60px;
        padding: 14px 10px 10px 15px;
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        background: #f0f0f0;
        margin-bottom: 30px;
        .tip {
          position: absolute;
          color: #fff;
          top: -12px;
          left: 15px;
          padding: 4px 10px;
        }
        p {
          line-height: 18px;
        }
        .collectBox {
          margin-left: 10px;
          i {
            font-size: 20px;
          }
          .sImg {
            width: 30px;
            height: 30px;
          }
        }
      }
    }
  }
}
</style>
